/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #2563eb;
  --ifm-color-primary-dark: #1554e0;
  --ifm-color-primary-darker: #1350d4;
  --ifm-color-primary-darkest: #1042ae;
  --ifm-color-primary-light: #3e75ed;
  --ifm-color-primary-lighter: #4a7eee;
  --ifm-color-primary-lightest: #7098f2;
  --ifm-code-font-size: 95%;
  --ifm-navbar-height: 4rem;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
html[data-theme='dark'] {
  --ifm-color-primary: #60a5fa;
  --ifm-color-primary-dark: #3e92f9;
  --ifm-color-primary-darker: #2e89f8;
  --ifm-color-primary-darkest: #076deb;
  --ifm-color-primary-light: #82b8fb;
  --ifm-color-primary-lighter: #92c1fc;
  --ifm-color-primary-lightest: #c5defd;
  --ifm-background-color: #020817;
  --ifm-navbar-background-color: #020817;
  --ifm-navbar-shadow: 0 1px 0 0 rgba(30, 41, 59);
  --ifm-toc-border-color: rgba(30, 41, 59);
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
}

input[type='number'] {
  padding: 3px 5px;
  border: 1px #ccc solid;
  line-height: 1.5;
  border-radius: 4px;
}

.navbar {
  box-shadow: none;
  border-bottom: 1px solid var(--ifm-toc-border-color);
}

.navbar__logo {
  width: 120px;
  margin-right: 1.1rem;
}

.navbar__item {
  margin-right: 1.1rem;
}

.footer {
  font-size: 10.5pt;
}

.footer__copyright {
  color: #888;
  font-size: 10pt;
  margin-top: 3em;
}

.menu__link {
  line-height: 1.5;
  font-size: 10.5pt;
}

article h1 {
  font-size: 1.8em;
  margin: 20px 0;
}

article h2 {
  font-size: 1.3em;
}

article h3 {
  font-size: 1.1em;
}

article img {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 8px;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 250px !important;
}

article table th {
  padding: 5px 10px;
}

article table td {
  padding: 5px 10px;
  font-size: 90%;
}

.form-range {
  width: 100%;
}

/* blogs */
article[itemprop=blogPost] header h1 {
  font-size: 2.4em;
}

article[itemprop=blogPost] header h2 {
  font-size: 1.6em;
}

article[itemprop=blogPost] header h2 a {
  color: var(--ifm-heading-color)
}

.avatar img {
  width: 60px !important;
}

.medium-zoom-overlay,
.medium-zoom-image--opened {
  z-index: 999;
}

.markdown pre code {
  margin: 0px !important;
  width: 100%;
}

.references-navigation {
  font-size: 10pt;
}

div[id^=headlessui-disclosure-panel] tr td.relative:nth-child(2) {
  position: inherit !important;
}